<template>
  <div class="content" v-for="(record, index) of stocks">
    <h3>
      <router-link :to="`/share/${record.quote.symbol}/details?title=${record.quote.name}`">{{ record.quote.name }}({{ record.quote.code }})</router-link>
      <b :class="getClass(record.quote.chg)">￥{{ record.quote.current }}</b>
      <b :class="getClass(record.quote.chg)">{{ record.quote.chg }}</b>
      <b :class="getClass(record.quote.chg)">{{ record.quote.percent }}%</b>
      <Icon v-if="index != 0" @click="addShare(record.quote)" name="add-o" color="rgb(238, 10, 36)"></Icon>
    </h3>
    <label>
      当前价<span>{{ record.quote.current }}</span>
    </label>
    <label>
      最高<span>{{ record.quote.high }}</span>
    </label>
    <label>
      今开<span>{{ record.quote.open }}</span>
    </label>
    <label>
      涨停<span>{{ record.quote.limit_up }}</span>
    </label>
    <label>
      跌停<span>{{ record.quote.limit_down }}</span>
    </label>
    <label>
      成交量<span>{{ helpers.friendlyNumbers(record.quote.volume) }}</span>
    </label>
    <label>
      成交额<span>{{ helpers.friendlyNumbers(record.quote.amount) }}</span>
    </label>
    <label>
      量比<span>{{ record.quote.volume_ratio }}%</span>
    </label>
    <label>
      每股收益<span>{{ record.quote.eps }}</span>
    </label>
    <label>
      每股净资产<span>{{ record.quote.navps }}</span>
    </label>
    <label>
      总股本<span>{{ helpers.friendlyNumbers(record.quote.total_shares) }}</span>
    </label>
    <label>
      总市值<span>{{ helpers.friendlyNumbers(record.quote.market_capital) }}</span>
    </label>
    <label>
      流通股<span>{{ helpers.friendlyNumbers(record.quote.float_shares) }}</span>
    </label>
    <label style="width: 66.66666%">
      流通股市值<span>{{ helpers.friendlyNumbers(record.quote.float_market_capital) }}</span>
    </label>
    <label>
      52周最高<span>{{ record.quote.high52w }}</span>
    </label>
    <label>
      52周最低<span>{{ record.quote.low52w }}</span>
    </label>
  </div>
</template>

<script setup>
  import dayjs from 'dayjs';
  import { useRoute } from 'vue-router';
  import { inject, ref, onMounted, watch } from 'vue';

  import { Icon, Dialog, Toast } from 'vant';
  import helpers from '~/libs/helpers.js';

  const $route = useRoute();
  const $http = inject('$http');

  const currentShare = ref('');
  const stocks = ref([]);

  async function getStock() {
    let res = await $http.get(`/api/shares/${currentShare.value}/stock`);

    stocks.value.unshift(res.data);

    getStocks(currentShare.value);
  }

  function getClass(val) {
    return val >= 0 ? 'up' : 'down';
  }

  async function getStocks(stockCode) {
    if (!stockCode) {
      return;
    }

    let res = await $http.get(`/api/shares/${stockCode}/company`);

    if (!(res.data || {}).affiliate_industry) {
      return;
    }

    let res2 = await $http.get(`/api/shares/${res.data.affiliate_industry.ind_code}/stocks`);

    stocks.value.push(...res2.data.items);
  }

  function addShare(info) {
    Dialog.confirm({
      title: '提醒',
      message: '是否确定关注该股票？'
    })
      .then(() => {
        let rawInfo = {};

        rawInfo.Code = info.code;
        rawInfo.Name = info.name;
        rawInfo.CreatedOn = dayjs().format('YYYY-MM-DD HH:mm:ss');

        if (!rawInfo.Code) {
          Toast.fail('股票编号不能为空！');

          return;
        }

        if (!rawInfo.Name) {
          Toast.fail('股票名称不能为空！');

          return;
        }

        if (rawInfo.Code.indexOf('00') == 0 || rawInfo.Code.indexOf('200') == 0 || rawInfo.Code.indexOf('30') == 0) {
          rawInfo.Code = 'sz' + rawInfo.Code;
        } else if (rawInfo.Code.indexOf('60') == 0 || rawInfo.Code.indexOf('900') == 0) {
          rawInfo.Code = 'sh' + rawInfo.Code;
        }

        $http.post('/api/shares/save', rawInfo).then(res => {
          if (res.success) {
            Toast.success('关注成功！');
          } else {
            Toast.fail('关注失败，错误详情：' + res.message);
          }
        });
      })
      .catch(() => {});
  }

  watch($route, () => {
    stocks.value.length = 0;
    currentShare.value = $route.params.code;

    getStock();
  });

  onMounted(() => {
    stocks.value.length = 0;
    currentShare.value = $route.params.code;

    getStock();
  });
</script>

<style lang="less" scoped>
  .content {
    user-select: none;
    background: #fff;
    padding: 10px 10px 5px 10px;
    border-radius: 5px;
    margin: 0;

    &:not(:first-of-type) {
      margin-top: 5px;
    }

    .up {
      color: #c1232b;
    }

    .down {
      color: green;
    }

    > h3 {
      padding: 0;
      margin: 0;
      padding-bottom: 3px;
      margin-top: -5px;
      margin-bottom: 5px;
      border-bottom: solid 1px #ccc;

      > strong {
        user-select: all;
        cursor: default;
        padding-right: 10px;
      }

      > b {
        font-size: 0.918em;
        padding-left: 15px;

        &:first-of-type {
          font-size: 1.2em;
        }
      }

      > .van-icon {
        float: right;
        top: 2px;
        font-size: 20px;
        position: relative;
        margin-right: 5px;
      }
    }

    > label {
      width: 33.3333%;
      line-height: 1.2;
      display: inline-block;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;

      > span {
        font-weight: normal;
        padding-left: 5px;
      }
    }
  }
</style>
